import React, { createRef, useEffect } from 'react';
import G6, { Graph } from '@antv/g6';
import request from 'umi-request';
const Main: React.FC = () => {

  const containerRef = createRef<HTMLDivElement>()

  const data = {
    // 点
    nodes: [
      {
        id: 'node1', // String，该节点存在则必须，节点的唯一标识
        x: 100, // Number，可选，节点位置的 x 值
        y: 200, // Number，可选，节点位置的 y 值
        label: '起始点'
      },
      {
        id: 'node2', // String，该节点存在则必须，节点的唯一标识
        x: 300, // Number，可选，节点位置的 x 值
        y: 200, // Number，可选，节点位置的 y 值
        label: '结束点'
      },
    ],

    // 线
    edges: [
      {
        source: 'node1', // String，必须，起始点 id
        target: 'node2', // String，必须，目标点 id
        label: '连线'
      },
    ],
  };

  let graph: Graph | null = null
  useEffect(() => {
    if(!graph) {
      graph = new G6.Graph({
        container: containerRef.current as HTMLElement, // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
        width: 800, // Number，必须，图的宽度
        height: 500, // Number，必须，图的高度
      });
    }
    graph.data(data); // 读取 Step 2 中的数据源到图上
    graph.render(); // 渲染图

    request.get('/static/GET-gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json').then(res => {
      console.log(res);
    })
  }, [])
  
  return <div ref={containerRef}></div>;
};
export default Main;
